<template>
	<!-- 添加弹框 -->
	<el-dialog title="" width="40%" :append-to-body="true" visible :show-close="false" class="wrap" @close="cancel">
		<i class="el-icon-close close" @click="cancel" style="color: white;"></i>
		<div class="bt">完成补课</div>
		<el-form label-width="100px" class="form">
			<el-form-item label="补课老师">
				<!-- <el-select v-model="vlsid" class="select-block" :readonly='true'>
					<el-option :label="v.mc" :value="v.id" v-for="v in comboxlist" ></el-option>
				</el-select></el-input> -->
				<el-input v-model="vlsmc" :readonly='true' icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="补课时间">
				<el-date-picker v-model="vbtime" type="date" class="select-block" placeholder="" :readonly='true'> </el-date-picker>

			</el-form-item>
			<el-form-item label="补课时间段">
				<el-input v-model="vsjd" :readonly='true' icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="补课学生">
				<ul>
					<li v-for="(i,index) in xsxx">
						<span>{{i.zwm}}</span>
						<span>{{i.mc}}</span>
						<!--<span>{{i.lx}}</span>-->
						<span>{{i.lx=='kq'? '考勤' :(i.lx=='sf'? '收费' : '成绩')}}</span>
						<span style="float: right;"><el-button :type="(i.cqzt==1?'primary':(i.cqzt==2?'warning':'danger'))"  size="mini" @click="kaoqin(i)">{{i.cqmc}}</el-button></span>
					</li>
				</ul>
			</el-form-item>

		</el-form>

		<el-button type="primary" class="submit" @click="submit">确认完成</el-button>
	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
		data() {
			return {
				xsxx:[],
				vlsmc:'',
				vbtime: '',
				vsjd:'',
				vlsid: '',
				comboxlist: [],
				dialogTableVisible: true,
			}
		},
		created() {
			this.bukeinfo()
		},
		methods: {
			kaoqin(list) {
				if(list.cqzt== 1){
					list.cqmc = '缺勤';
					list.cqzt = 2
				}else if(list.cqzt == 2){
					list.cqmc = "迟到";
					list.cqzt = 3
				}else if(list.cqzt=3){
					list.cqmc = "出勤";
					list.cqzt = 1
				}
			},
				bukeinfo(){
			  var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
              var params2 = qs.stringify({
                        id:this.params.row.id,
						xxid: logininfo.xxid,
						yhid: logininfo.id,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bkap/info',  params2 )
                 .then(res => {
                 	if(res.data.code == 1) {
                 		console.log(res,'xxxx')
                 			let data = res.data.data
                 			this.xsxx = data.list
                 			this.vlsmc = data.info[0].zwm
                 			this.vbtime = data.info[0].sj
                 			this.vbz = data.info[0].bz
                 			this.vsjd = data.info[0].sjd
 							} else {
 								this.$message.warning(res.data.msg);
 								this.$store.state.loading = false;
 							}
                 }).catch(res => {
//               	console.log(res,999999999999999)
					   this.$message.warning("服务器异常");
						this.$store.state.loading = false;
				})
				
			},
			
			
			submit() {
				//检测
				var qstr = ""
				for(var j in this.xsxx){
					qstr+=";"+this.xsxx[j].id+','+this.xsxx[j].cqzt
				}
				this.$store.state.loading = true;
				var time1 = this.$.getLocalTimeNo0(Date.parse(this.vbtime));
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
					qstr:qstr,
					bkapid: this.params.row.id,
					xxid: logininfo.xxid,
					yhid: logininfo.id,
				});
				//执行
				this.axios.post(this.$store.state.api + 'bkap/bkwc', params3)
					.then(res => {
						if(res.data.code == 1) {
							this.$emit('close', {type: 'info',cancel: false});
							this.$message.success(res.data.msg);
							this.$store.state.loading = false;
						} else {
							this.$message.warning(res.data.msg);
							this.$store.state.loading = false;
						}
					}).catch(res => {
						this.$message.warning("服务器繁忙，请重试");
						this.$store.state.loading = false;
					})
			},

			cancel() {
				this.$emit('close', {
					type: 'info',
					info: true
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	.wrap {
		.row {
			height: 50px;
			line-height: 50px;
		}
		ul{
			li{
				width: 90%;
				overflow: hidden;
				border: 1px solid #D8DCE5;
				margin-top: 5px;
				span{
					/*border: 1px solid #D8DCE5;*/
					width: 25%;
					height: 40px;
					text-align: center;
					float: left;
				}
			}
		}
		.bt {
			position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top: 0;
			left: 0;
			// margin-top: -70px;
			background: #50BFFF;
			// margin-left: -20px;
			// margin-bottom: 20px;
			color: white;
			text-align: left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.close {
			z-index: 10;
			position: absolute;
		}
		.input-block {
			margin-bottom: 20px;
			text-align: center;
		}
		.input {
			width: 280px;
			display: inline-block;
			margin-left: 10px;
		}
		.input1 {
			width: 210px;
			display: inline-block;
			margin-left: 10px;
		}
		.input-block span {
			display: inline-block;
			width: 70px;
			text-align: right;
		}
		.submit {
			width: 120px;
			display: block;
			margin: 0 auto;
			margin-top: 20px;
		}
		.wpfl {
			background: #fff;
			position: absolute;
			top: 5px;
			left: 5px;
		}
		.wpfl1 {
			width: 130%;
			background: #fff;
			position: absolute;
			top: 5px;
			left: -66px;
		}
		.form {
			text-align: left;
			margin-top: 20px;
			.select-block {
				width: 85%;
				display: block;
			}
			.select-block1 {
				width: 68%;
				// display: block;
			}
		}
	}
</style>